<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <input placeholder="请输入要查找的内容" v-model="query">
        <transition-group name="item" tag="ul" @before-enter="beforeEnter"
         @enter="enter" @leave="leave" v-bind:css="false">
          <li v-for="(item, index) in ComputedList" :key="item.msg"
           :data-index="index">
            {{ item.msg }}
          </li>
        </transition-group>
      </div>
      <script>
          var vm=new Vue({
              data(){
                  return{
                    query:'',
                     items:[
                         {msg:"张三"},{msg:"李四"},{msg:"张凡芳"},{msg:"王琳琳"},{msg:"小明"}
                     ]
                  }
              },
              computed:{
                  ComputedList(){
                      var vm =this.query,nameList=this.items
                      return nameList.filter(function (item){
                          return item.msg().indexOf(vm) !== -1
                      })
                  }
              },
              methods:{
                  beforeEnter(el){
                      el.style.opacity=0;el.style.height=0
                  },
                  enter(el,done){
                      var delay=el.dataset.index *150
                      setTimeout(function(){
                          Velocity(el,{opacity:1,height:'1.6em'},{comlete:done})
                      },delay)
                  },
                  leave(el,done){
                      var delay=el.dataset.index *150
                      setTimeout(function(){
                          Velocity(el,{opacity:0,height:0},{complete:done})
                      },delay)
                  }
              }
          })
      </script>
</body>
</html>